<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航栏 -->
    <Header />
    <!-- 左侧导航栏 -->
    <aside class="fixed left-0 top-16 bottom-0 w-64 bg-gray-800 text-white z-10 overflow-y-auto">
      <nav class="py-4">
        <div v-for="(menu, index) in mainMenus" :key="index" class="mb-1">
          <div class="flex items-center px-6 py-3 cursor-pointer hover:bg-gray-700"
            :class="{ 'bg-blue-700': menu.active }" @click="toggleMenu(index)">
            <i :class="menu.icon + ' mr-3 w-5 text-center'"></i>
            <span>{{ menu.name }}</span>
            <i class="fas fa-chevron-down ml-auto text-xs transition-transform duration-200"
              :class="{ 'transform rotate-180': menu.expanded }"></i>
          </div>
          <div v-if="menu.expanded" class="bg-gray-900">
            <div v-for="(submenu, subIndex) in menu.subMenus" :key="subIndex"
              class="flex items-center px-10 py-2 cursor-pointer hover:bg-gray-700"
              :class="{ 'text-blue-400': submenu.active }" @click="selectSubmenu(index, subIndex)">
              <a v-if="submenu.link" :href="submenu.link" data-readdy="true" class="text-sm w-full">{{ submenu.name
                }}</a>
              <span v-else class="text-sm">{{ submenu.name }}</span>
            </div>
          </div>
        </div>
      </nav>
    </aside>
    <!-- 主内容区域 -->
    <main class="pt-16 pl-64">
      <div class="container mx-auto p-6">
        <!-- 面包屑导航 -->
        <div class="flex items-center text-sm mb-4 text-gray-500">
          <span>首页</span>
          <i class="fas fa-chevron-right mx-2 text-xs"></i>
          <span>综合分析</span>
          <i class="fas fa-chevron-right mx-2 text-xs"></i>
          <span>联网与设备分析</span>
          <i class="fas fa-chevron-right mx-2 text-xs"></i>
          <span class="text-blue-600">全部设备</span>
        </div>
        <!-- 筛选条件区域 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
          <div class="flex flex-wrap items-center gap-4 mb-4">
            <div class="flex items-center">
              <span class="text-gray-600 mr-2">设备类型：</span>
              <div class="relative">
                <button
                  class="flex items-center justify-between w-48 px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg focus:outline-none !rounded-button whitespace-nowrap cursor-pointer"
                  @click="toggleDropdown('deviceType')">
                  <span class="text-gray-700">{{
                    selectedDeviceTypes.length
                      ? `已选
                    ${selectedDeviceTypes.length} 项`
                      : "全部设备"
                  }}</span>
                  <i class="fas fa-chevron-down text-gray-500 text-xs"></i>
                </button>
                <div v-if="dropdowns.deviceType"
                  class="absolute z-10 mt-1 w-48 bg-white rounded-lg shadow-lg border border-gray-200">
                  <div class="p-2">
                    <div v-for="(type, index) in deviceTypes" :key="index"
                      class="flex items-center p-2 hover:bg-gray-100 rounded cursor-pointer">
                      <input type="checkbox" :id="`type-${index}`" v-model="selectedDeviceTypes" :value="type"
                        class="mr-2" />
                      <label :for="`type-${index}`" class="text-sm text-gray-700 cursor-pointer">{{ type }}</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex items-center">
              <span class="text-gray-600 mr-2">所属车间：</span>
              <div class="relative">
                <button
                  class="flex items-center justify-between w-48 px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg focus:outline-none !rounded-button whitespace-nowrap cursor-pointer"
                  @click="toggleDropdown('workshop')">
                  <span class="text-gray-700">{{
                    selectedWorkshops.length
                      ? `已选 ${selectedWorkshops.length} 项`
                      : "全部车间"
                  }}</span>
                  <i class="fas fa-chevron-down text-gray-500 text-xs"></i>
                </button>
                <div v-if="dropdowns.workshop"
                  class="absolute z-10 mt-1 w-48 bg-white rounded-lg shadow-lg border border-gray-200">
                  <div class="p-2">
                    <div v-for="(workshop, index) in workshopOptions" :key="index"
                      class="flex items-center p-2 hover:bg-gray-100 rounded cursor-pointer">
                      <input type="checkbox" :id="`workshop-${index}`" v-model="selectedWorkshops" :value="workshop"
                        class="mr-2" />
                      <label :for="`workshop-${index}`" class="text-sm text-gray-700 cursor-pointer">{{ workshop
                        }}</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex items-center">
              <span class="text-gray-600 mr-2">运行状态：</span>
              <div class="relative">
                <button
                  class="flex items-center justify-between w-48 px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg focus:outline-none !rounded-button whitespace-nowrap cursor-pointer"
                  @click="toggleDropdown('status')">
                  <span class="text-gray-700">{{
                    selectedStatuses.length
                      ? `已选
                    ${selectedStatuses.length} 项`
                      : "全部状态"
                  }}</span>
                  <i class="fas fa-chevron-down text-gray-500 text-xs"></i>
                </button>
                <div v-if="dropdowns.status"
                  class="absolute z-10 mt-1 w-48 bg-white rounded-lg shadow-lg border border-gray-200">
                  <div class="p-2">
                    <div v-for="(status, index) in statusOptions" :key="index"
                      class="flex items-center p-2 hover:bg-gray-100 rounded cursor-pointer">
                      <input type="checkbox" :id="`status-${index}`" v-model="selectedStatuses" :value="status.value"
                        class="mr-2" />
                      <label :for="`status-${index}`" class="text-sm text-gray-700 cursor-pointer flex items-center">
                        <span class="h-2.5 w-2.5 rounded-full mr-2" :class="status.color"></span>
                        {{ status.label }}
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex flex-wrap items-center gap-4">
            <div class="flex items-center">
              <span class="text-gray-600 mr-2">健康评分：</span>
              <div class="flex items-center">
                <input type="number" v-model="healthScoreMin" placeholder="最小值"
                  class="w-20 px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm focus:outline-none border-none" />
                <span class="mx-2 text-gray-500">至</span>
                <input type="number" v-model="healthScoreMax" placeholder="最大值"
                  class="w-20 px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm focus:outline-none border-none" />
              </div>
            </div>
            <div class="flex-grow">
              <div class="relative">
                <input type="text" placeholder="搜索设备ID/名称" v-model="searchQuery"
                  class="w-full px-3 py-2 pl-10 bg-gray-100 border border-gray-300 rounded-lg text-sm focus:outline-none border-none" />
                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
              </div>
            </div>
            <div class="flex gap-2">
              <button
                class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                @click="resetFilters">
                <i class="fas fa-redo mr-1"></i> 重置
              </button>
            </div>
          </div>
        </div>
        <!-- 数据统计概览 -->
        <div class="grid grid-cols-4 gap-4 mb-6">
          <!-- 设备总数卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
            <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
              <i class="fas fa-cogs text-xl"></i>
            </div>
            <div>
              <div class="text-sm text-gray-500">设备总数</div>
              <div class="text-2xl font-bold text-gray-900">3,842</div>
              <div class="text-xs text-green-600 flex items-center">
                <i class="fas fa-arrow-up mr-1"></i> 较上月增加 42 台
              </div>
            </div>
          </div>
          <!-- 在线设备卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
            <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-4">
              <i class="fas fa-wifi text-xl"></i>
            </div>
            <div>
              <div class="text-sm text-gray-500">在线设备</div>
              <div class="text-2xl font-bold text-gray-900">3,556</div>
              <div class="text-xs text-gray-600 flex items-center">
                <span class="text-green-600">联网率: 92.6%</span>
              </div>
            </div>
          </div>
          <!-- 故障设备卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
            <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-red-600 mr-4">
              <i class="fas fa-exclamation-triangle text-xl"></i>
            </div>
            <div>
              <div class="text-sm text-gray-500">故障设备</div>
              <div class="text-2xl font-bold text-gray-900">156</div>
              <div class="text-xs text-red-600 flex items-center">
                <i class="fas fa-tools mr-1"></i> 需要维护
              </div>
            </div>
          </div>
          <!-- 设备健康评分卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
            <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-4">
              <i class="fas fa-heartbeat text-xl"></i>
            </div>
            <div>
              <div class="text-sm text-gray-500">平均健康评分</div>
              <div class="text-2xl font-bold text-gray-900">86.5</div>
              <div class="text-xs text-indigo-600 flex items-center">
                <i class="fas fa-certificate mr-1"></i> 优良
              </div>
            </div>
          </div>
        </div>
        <!-- 设备列表视图切换和操作按钮 -->
        <div class="flex justify-between items-center mb-4">
          <div class="flex items-center space-x-2">
            <button class="px-3 py-1.5 rounded-lg flex items-center !rounded-button whitespace-nowrap cursor-pointer"
              :class="viewMode === 'table'
                ? 'bg-blue-600 text-white'
                : 'bg-gray-200 text-gray-700'
                " @click="viewMode = 'table'">
              <i class="fas fa-table mr-1"></i> 表格视图
            </button>
            <button class="px-3 py-1.5 rounded-lg flex items-center !rounded-button whitespace-nowrap cursor-pointer"
              :class="viewMode === 'card'
                ? 'bg-blue-600 text-white'
                : 'bg-gray-200 text-gray-700'
                " @click="viewMode = 'card'">
              <i class="fas fa-th-large mr-1"></i> 卡片视图
            </button>
          </div>
          <!-- 列显示和刷新按钮 -->
          <div class="flex items-center space-x-2">
            <div class="relative">
              <button
                class="px-3 py-1.5 bg-gray-200 text-gray-700 rounded-lg flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                @click="toggleColumnSelector">
                <i class="fas fa-columns mr-1"></i> 列显示
              </button>
              <!-- 列选择器下拉菜单 -->
              <div v-if="showColumnSelector"
                class="absolute right-0 top-10 z-20 bg-white rounded-lg shadow-lg border border-gray-200 p-3 w-64">
                <div class="text-sm font-medium text-gray-700 mb-2">
                  选择显示列
                </div>
                <div class="max-h-60 overflow-y-auto">
                  <div v-for="(col, index) in allColumns" :key="index"
                    class="flex items-center p-2 hover:bg-gray-100 rounded">
                    <input type="checkbox" :id="`col-${index}`" v-model="visibleColumns" :value="col.key"
                      class="mr-2" />
                    <label :for="`col-${index}`" class="text-sm text-gray-700 cursor-pointer">{{ col.label }}</label>
                  </div>
                </div>
              </div>
            </div>
            <!-- 刷新按钮 -->
            <button
              class="px-3 py-1.5 bg-gray-200 text-gray-700 rounded-lg flex items-center !rounded-button whitespace-nowrap cursor-pointer"
              @click="refreshData">
              <i class="fas fa-sync-alt mr-1"></i> 刷新
            </button>
          </div>
        </div>
        <!-- 表格视图 -->
        <div v-if="viewMode === 'table'" class="bg-white rounded-lg shadow-sm overflow-hidden mb-6">
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead>
                <tr>
                  <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                    <div class="flex items-center">
                      <input type="checkbox" v-model="selectAll" @change="toggleSelectAll" class="mr-2" />
                      <span>设备信息</span>
                    </div>
                  </th>
                  <th v-for="col in visibleColumnsData" :key="col.key"
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                    <div class="flex items-center cursor-pointer text-left" @click="sortBy(col.key)">
                      {{ col.label }}
                      <i v-if="sortColumn === col.key" :class="sortDirection === 'asc'
                        ? 'fas fa-sort-up ml-1'
                        : 'fas fa-sort-down ml-1'
                        "></i>
                      <i v-else class="fas fa-sort ml-1 text-gray-300"></i>
                    </div>
                  </th>
                  <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                    操作
                  </th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr v-for="(device, index) in paginatedDevices" :key="index" class="hover:bg-gray-50">
                  <td class="px-4 py-3">
                    <div class="flex items-center">
                      <input type="checkbox" v-model="selectedDevices" :value="device.id" class="mr-3" />
                      <div class="w-8 h-8 rounded-full flex items-center justify-center mr-3" :class="device.iconBg">
                        <i :class="device.icon + ' ' + device.iconColor"></i>
                      </div>
                      <div>
                        <div class="text-sm font-medium text-gray-900">
                          {{ device.name }}
                        </div>
                        <div class="text-xs text-gray-500">
                          ID: {{ device.id }}
                        </div>
                      </div>
                    </div>
                  </td>
                  <td v-if="isColumnVisible('type')" class="px-4 py-3">
                    <div class="text-sm text-gray-900 text-left">{{ device.type }}</div>
                  </td>
                  <td v-if="isColumnVisible('workshop')" class="px-4 py-3">
                    <div class="text-sm text-gray-900 text-left">
                      {{ device.workshop }}
                    </div>
                  </td>
                  <td v-if="isColumnVisible('status')" class="px-4 py-3">
                    <div class="flex items-center">
                      <span class="h-2.5 w-2.5 rounded-full mr-2" :class="device.statusColor"></span>
                      <span class="text-sm text-gray-900">{{
                        device.status
                        }}</span>
                    </div>
                  </td>
                  <td v-if="isColumnVisible('load')" class="px-4 py-3">
                    <div class="text-sm text-gray-900 justify-center">{{ device.load }}</div>
                    <div class="w-full bg-gray-200 rounded-full h-1.5">
                      <div class="h-1.5 rounded-full" :style="{
                        width: device.loadPercentage + '%',
                        backgroundColor: device.loadColor,
                      }"></div>
                    </div>
                  </td>
                  <td v-if="isColumnVisible('temperature')" class="px-4 py-3">
                    <div class="text-sm" :class="device.tempColor">
                      {{ device.temperature }}
                    </div>
                  </td>
                  <td v-if="isColumnVisible('vibration')" class="px-4 py-3">
                    <div class="text-sm" :class="device.vibrationColor">
                      {{ device.vibration }}
                    </div>
                  </td>
                  <td v-if="isColumnVisible('healthScore')" class="px-4 py-3">
                    <div class="flex items-center">
                      <div class="text-sm font-medium" :class="device.scoreColor">
                        {{ device.healthScore }}
                      </div>
                      <div class="ml-2 w-16 bg-gray-200 rounded-full h-1.5">
                        <div class="h-1.5 rounded-full" :style="{
                          width: device.healthScore + '%',
                          backgroundColor: device.scoreColor.replace(
                            'text-',
                            'bg-'
                          ),
                        }"></div>
                      </div>
                    </div>
                  </td>
                  <td v-if="isColumnVisible('lastMaintenance')" class="px-4 py-3">
                    <div class="text-sm text-gray-900">
                      {{ device.lastMaintenance }}
                    </div>
                  </td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
                    <div class="flex space-x-2 justify-center">
                      <button class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer"
                        @click="viewDeviceDetails(device)">
                        <i class="fas fa-info-circle mr-1"></i> 详情
                      </button>
                      <button
                        class="text-green-600 hover:text-green-800 !rounded-button whitespace-nowrap cursor-pointer"
                        @click="monitorDevice(device)">
                        <i class="fas fa-desktop mr-1"></i> 监控
                      </button>
                      <button
                        class="text-purple-600 hover:text-purple-800 !rounded-button whitespace-nowrap cursor-pointer"
                        @click="maintainDevice(device)">
                        <i class="fas fa-tools mr-1"></i> 维护
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- 卡片视图 -->
        <div v-if="viewMode === 'card'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
          <div v-for="(device, index) in paginatedDevices" :key="index"
            class="bg-white rounded-lg shadow-sm overflow-hidden">
            <div class="p-4">
              <div class="flex justify-between items-start">
                <div class="flex items-center">
                  <div class="w-10 h-10 rounded-full flex items-center justify-center mr-3" :class="device.iconBg">
                    <i :class="device.icon + ' ' + device.iconColor"></i>
                  </div>
                  <div>
                    <div class="text-lg font-medium text-gray-900">
                      {{ device.name }}
                    </div>
                    <div class="text-sm text-gray-500">ID: {{ device.id }}</div>
                  </div>
                </div>
                <div class="flex items-center">
                  <span class="h-3 w-3 rounded-full mr-2" :class="device.statusColor"></span>
                  <span class="text-sm font-medium" :class="getStatusTextColor(device.status)">{{ device.status
                    }}</span>
                </div>
              </div>
              <div class="mt-4 grid grid-cols-2 gap-3">
                <!-- 根据列显示设置动态显示卡片内容 -->
                <div v-if="isColumnVisible('type')" class="bg-gray-50 p-2 rounded">
                  <div class="text-xs text-gray-500">设备类型</div>
                  <div class="text-sm font-medium">{{ device.type }}</div>
                </div>
                <div v-if="isColumnVisible('workshop')" class="bg-gray-50 p-2 rounded">
                  <div class="text-xs text-gray-500">所属车间</div>
                  <div class="text-sm font-medium">{{ device.workshop }}</div>
                </div>
                <div v-if="isColumnVisible('load')" class="bg-gray-50 p-2 rounded">
                  <div class="text-xs text-gray-500">当前负载</div>
                  <div class="text-sm font-medium">{{ device.load }}</div>
                  <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
                    <div class="h-1.5 rounded-full" :style="{
                      width: device.loadPercentage + '%',
                      backgroundColor: device.loadColor,
                    }"></div>
                  </div>
                </div>
                <div v-if="isColumnVisible('temperature')" class="bg-gray-50 p-2 rounded">
                  <div class="text-xs text-gray-500">温度</div>
                  <div class="text-sm font-medium" :class="device.tempColor">
                    {{ device.temperature }}
                  </div>
                </div>
                <div v-if="isColumnVisible('vibration')" class="bg-gray-50 p-2 rounded">
                  <div class="text-xs text-gray-500">振动值</div>
                  <div class="text-sm font-medium" :class="device.vibrationColor">
                    {{ device.vibration }}
                  </div>
                </div>
                <div v-if="isColumnVisible('healthScore')" class="bg-gray-50 p-2 rounded">
                  <div class="text-xs text-gray-500">健康评分</div>
                  <div class="flex items-center">
                    <div class="text-sm font-medium" :class="device.scoreColor">
                      {{ device.healthScore }}
                    </div>
                    <div class="ml-2 flex-grow bg-gray-200 rounded-full h-1.5">
                      <div class="h-1.5 rounded-full" :style="{
                        width: device.healthScore + '%',
                        backgroundColor: device.scoreColor.replace(
                          'text-',
                          'bg-'
                        ),
                      }"></div>
                    </div>
                  </div>
                </div>
                <div v-if="isColumnVisible('lastMaintenance')" class="bg-gray-50 p-2 rounded">
                  <div class="text-xs text-gray-500">上次维护</div>
                  <div class="text-sm font-medium">
                    {{ device.lastMaintenance }}
                  </div>
                </div>
                <div v-if="isColumnVisible('status')" class="bg-gray-50 p-2 rounded">
                  <div class="text-xs text-gray-500">运行状态</div>
                  <div class="flex items-center">
                    <span class="h-2.5 w-2.5 rounded-full mr-2" :class="device.statusColor"></span>
                    <span class="text-sm text-gray-900">{{
                      device.status
                      }}</span>
                  </div>
                </div>
              </div>
              <div class="mt-4 flex justify-between justify-center">
                <button
                  class="px-3 py-1.5 bg-blue-100 text-blue-600 rounded-lg flex items-center text-sm !rounded-button whitespace-nowrap cursor-pointer"
                  @click="viewDeviceDetails(device)">
                  <i class="fas fa-info-circle mr-1"></i> 详情
                </button>
                <button
                  class="px-3 py-1.5 bg-green-100 text-green-600 rounded-lg flex items-center text-sm !rounded-button whitespace-nowrap cursor-pointer"
                  @click="monitorDevice(device)">
                  <i class="fas fa-desktop mr-1"></i> 监控
                </button>
                <button
                  class="px-3 py-1.5 bg-purple-100 text-purple-600 rounded-lg flex items-center text-sm !rounded-button whitespace-nowrap cursor-pointer"
                  @click="maintainDevice(device)">
                  <i class="fas fa-tools mr-1"></i> 维护
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- 批量查看和分页 -->
        <div class="flex justify-between items-center mb-6">
          <div class="flex items-center space-x-2">
            <span class="text-sm text-gray-600">已选择 {{ selectedDevices.length }} 项</span>
            <button
              class="px-3 py-1.5 bg-blue-600 text-white rounded-lg flex items-center text-sm !rounded-button whitespace-nowrap cursor-pointer"
              :disabled="selectedDevices.length === 0" :class="{
                'opacity-50 cursor-not-allowed': selectedDevices.length === 0,
              }" @click="handleBatchOperation">
              <i class="fas fa-cog mr-1"></i> 批量查看
            </button>
          </div>
          <div class="flex items-center space-x-2">
            <span class="text-sm text-gray-600">共 {{ totalDevices }} 条</span>
            <div class="flex items-center space-x-1">
              <button
                class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-300 !rounded-button whitespace-nowrap cursor-pointer"
                :class="{ 'bg-gray-200': currentPage === 1 }" :disabled="currentPage === 1"
                @click="goToPage(currentPage - 1)">
                <i class="fas fa-chevron-left text-gray-600"></i>
              </button>
              <button v-for="page in displayedPages" :key="page"
                class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-300 !rounded-button whitespace-nowrap cursor-pointer"
                :class="{
                  'bg-blue-600 text-white': currentPage === page,
                  'text-gray-700': currentPage !== page,
                }" @click="goToPage(page)">
                {{ page }}
              </button>
              <button
                class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-300 !rounded-button whitespace-nowrap cursor-pointer"
                :class="{ 'bg-gray-200': currentPage === totalPages }" :disabled="currentPage === totalPages"
                @click="goToPage(currentPage + 1)">
                <i class="fas fa-chevron-right text-gray-600"></i>
              </button>
            </div>
            <div class="flex items-center space-x-2">
              <span class="text-sm text-gray-600">每页</span>
              <div class="relative">
                <select v-model="pageSize"
                  class="appearance-none bg-gray-100 border border-gray-300 text-gray-700 py-1 px-3 pr-8 rounded-lg text-sm focus:outline-none">
                  <option v-for="size in pageSizeOptions" :key="size" :value="size">
                    {{ size }}
                  </option>
                </select>
                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                  <i class="fas fa-chevron-down text-xs"></i>
                </div>
              </div>
              <span class="text-sm text-gray-600">条</span>
            </div>
          </div>
        </div>
        <!-- 设备状态分布图表 -->
        <div class="grid grid-cols-2 gap-6 mb-6">
          <div class="bg-white rounded-lg shadow-sm p-4">
            <div class="flex justify-between items-center mb-4">
              <h2 class="font-bold text-lg text-gray-800">设备状态分布</h2>
              <div class="text-xs text-gray-500">
                <i class="fas fa-sync-alt mr-1"></i> 更新于 {{ currentTime }}
              </div>
            </div>
            <div id="deviceStatusChart" class="h-80" ref="deviceStatusChart"></div>
          </div>
          <div class="bg-white rounded-lg shadow-sm p-4">
            <div class="flex justify-between items-center mb-4">
              <h2 class="font-bold text-lg text-gray-800">设备健康评分分布</h2>
              <div class="text-xs text-gray-500">
                <i class="fas fa-sync-alt mr-1"></i> 更新于 {{ currentTime }}
              </div>
            </div>
            <div id="healthScoreChart" class="h-80" ref="healthScoreChart"></div>
          </div>
        </div>
        <!-- 设备维护记录 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
          <div class="flex justify-between items-center mb-4">
            <h2 class="font-bold text-lg text-gray-800">近期维护记录</h2>
            <button class="text-sm text-blue-600 cursor-pointer" @click="viewAllMaintenanceRecords">
              查看全部记录
            </button>
          </div>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead>
                <tr>
                  <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                    设备名称
                  </th>
                  <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">
                    维护类型
                  </th>
                  <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">
                    维护时间
                  </th>
                  <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">
                    维护人员
                  </th>
                  <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">
                    维护结果
                  </th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr v-for="(record, index) in maintenanceRecords.slice(0, 6)" :key="index" class="hover:bg-gray-50">
                  <td class="px-4 py-3">
                    <div class="flex items-center justify-center">
                      <div class="w-8 h-8 rounded-full flex items-center justify-center mr-3" :class="record.iconBg">
                        <i :class="record.icon + ' ' + record.iconColor"></i>
                      </div>
                      <div>
                        <div class="text-sm font-medium text-gray-900">
                          {{ record.deviceName }}
                        </div>
                        <div class="text-xs text-gray-500">
                          ID: {{ record.deviceId }}
                        </div>
                      </div>
                    </div>
                  </td>
                  <td class="px-4 py-3">
                    <div class="text-sm text-gray-900 justify-center">{{ record.type }}</div>
                  </td>
                  <td class="px-4 py-3">
                    <div class="text-sm text-gray-900 justify-center">{{ record.time }}</div>
                  </td>
                  <td class="px-4 py-3">
                    <div class="text-sm text-gray-900 justify-center">{{ record.person }}</div>
                  </td>
                  <td class="px-4 py-3">
                    <div class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium justify-center"
                      :class="record.resultClass">
                      {{ record.result }}
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- 设备预警信息 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
          <div class="flex justify-between items-center mb-4">
            <h2 class="font-bold text-lg text-gray-800">设备预警信息</h2>
            <div class="flex items-center">
              <span class="text-sm text-red-600 mr-2">有 {{ alertMessages.length }} 条未处理预警</span>
              <button class="text-sm text-blue-600 cursor-pointer" @click="viewAllAlerts">
                查看全部
              </button>
            </div>
          </div>
          <div class="space-y-3">
            <div v-for="(alert, index) in alertMessages.slice(0, 3)" :key="index"
              class="bg-gray-50 p-3 rounded-lg flex justify-between items-center">
              <div class="flex items-center">
                <div class="w-10 h-10 rounded-full flex items-center justify-center mr-3" :class="alert.iconBg">
                  <i :class="alert.icon + ' ' + alert.iconColor"></i>
                </div>
                <div>
                  <div class="text-sm font-medium text-gray-900">
                    {{ alert.title }}
                  </div>
                  <div class="text-xs text-gray-500">
                    {{ alert.time }} · {{ alert.device }}
                  </div>
                </div>
              </div>
              <div class="flex items-center space-x-2">
                <div class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                  :class="alert.levelClass">
                  {{ alert.level }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <!-- 批量设备详情模态框 -->
    <div v-if="showBatchDetailModal" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" @click="closeBatchDetailModal">
          <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>&#8203;
        <div
          class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-6xl sm:w-full">
          <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                <div class="flex justify-between items-center border-b pb-3">
                  <h3 class="text-lg leading-6 font-medium text-gray-900">
                    批量设备详情 (已选择 {{ selectedDevices.length }} 项)
                  </h3>
                  <button @click="closeBatchDetailModal" class="text-gray-400 hover:text-gray-500">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
                <div class="mt-4">
                  <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                      <thead>
                        <tr>
                          <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                            设备信息
                          </th>
                          <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                            设备类型
                          </th>
                          <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                            所属车间
                          </th>
                          <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                            运行状态
                          </th>
                          <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                            当前负载
                          </th>
                          <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                            温度
                          </th>
                          <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                            振动值
                          </th>
                          <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                            健康评分
                          </th>
                        </tr>
                      </thead>
                      <tbody class="bg-white divide-y divide-gray-200">
                        <tr v-for="(device, index) in getSelectedDevices()" :key="index" class="hover:bg-gray-50">
                          <td class="px-4 py-3">
                            <div class="flex items-center">
                              <div class="w-8 h-8 rounded-full flex items-center justify-center mr-3"
                                :class="device.iconBg">
                                <i :class="device.icon + ' ' + device.iconColor"></i>
                              </div>
                              <div>
                                <div class="text-sm font-medium text-gray-900">
                                  {{ device.name }}
                                </div>
                                <div class="text-xs text-gray-500">
                                  ID: {{ device.id }}
                                </div>
                              </div>
                            </div>
                          </td>
                          <td class="px-4 py-3">
                            <div class="text-sm text-gray-900">{{ device.type }}</div>
                          </td>
                          <td class="px-4 py-3">
                            <div class="text-sm text-gray-900">{{ device.workshop }}</div>
                          </td>
                          <td class="px-4 py-3">
                            <div class="flex items-center">
                              <span class="h-2.5 w-2.5 rounded-full mr-2" :class="device.statusColor"></span>
                              <span class="text-sm text-gray-900">{{ device.status }}</span>
                            </div>
                          </td>
                          <td class="px-4 py-3">
                            <div class="text-sm text-gray-900">{{ device.load }}</div>
                            <div class="w-full bg-gray-200 rounded-full h-1.5">
                              <div class="h-1.5 rounded-full" :style="{
                                width: device.loadPercentage + '%',
                                backgroundColor: device.loadColor,
                              }"></div>
                            </div>
                          </td>
                          <td class="px-4 py-3">
                            <div class="text-sm" :class="device.tempColor">
                              {{ device.temperature }}
                            </div>
                          </td>
                          <td class="px-4 py-3">
                            <div class="text-sm" :class="device.vibrationColor">
                              {{ device.vibration }}
                            </div>
                          </td>
                          <td class="px-4 py-3">
                            <div class="flex items-center">
                              <div class="text-sm font-medium" :class="device.scoreColor">
                                {{ device.healthScore }}
                              </div>
                              <div class="ml-2 w-16 bg-gray-200 rounded-full h-1.5">
                                <div class="h-1.5 rounded-full" :style="{
                                  width: device.healthScore + '%',
                                  backgroundColor: device.scoreColor.replace(
                                    'text-',
                                    'bg-'
                                  ),
                                }"></div>
                              </div>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button type="button"
              class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
              @click="closeBatchDetailModal">
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 设备详情模态框 -->
    <div v-if="showDeviceDetailModal" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" @click="closeDeviceDetailModal">
          <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>&#8203;
        <div
          class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full">
          <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                <div class="flex justify-between items-center border-b pb-3">
                  <h3 class="text-lg leading-6 font-medium text-gray-900">
                    设备详情 - {{ currentDevice ? currentDevice.name : '' }}
                  </h3>
                  <button @click="closeDeviceDetailModal" class="text-gray-400 hover:text-gray-500">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
                <div class="mt-4 grid grid-cols-2 gap-4">
                  <div v-if="currentDevice" class="col-span-2">
                    <div class="flex items-center mb-4">
                      <div class="w-12 h-12 rounded-full flex items-center justify-center mr-4"
                        :class="currentDevice.iconBg">
                        <i :class="currentDevice.icon + ' ' + currentDevice.iconColor"></i>
                      </div>
                      <div>
                        <div class="text-xl font-bold text-gray-900">{{ currentDevice.name }}</div>
                        <div class="text-gray-500">ID: {{ currentDevice.id }}</div>
                      </div>
                    </div>
                  </div>

                  <div>
                    <h4 class="text-sm font-medium text-gray-500">设备类型</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ currentDevice ? currentDevice.type : '' }}</p>
                  </div>

                  <div>
                    <h4 class="text-sm font-medium text-gray-500">所属车间</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ currentDevice ? currentDevice.workshop : '' }}</p>
                  </div>

                  <div>
                    <h4 class="text-sm font-medium text-gray-500">运行状态</h4>
                    <div class="mt-1 flex items-center">
                      <span class="h-2.5 w-2.5 rounded-full mr-2"
                        :class="currentDevice ? currentDevice.statusColor : ''"></span>
                      <span class="text-sm text-gray-900">{{ currentDevice ? currentDevice.status : '' }}</span>
                    </div>
                  </div>

                  <div>
                    <h4 class="text-sm font-medium text-gray-500">当前负载</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ currentDevice ? currentDevice.load : '' }}</p>
                  </div>

                  <div>
                    <h4 class="text-sm font-medium text-gray-500">温度</h4>
                    <p class="mt-1 text-sm" :class="currentDevice ? currentDevice.tempColor : ''">
                      {{ currentDevice ? currentDevice.temperature : '' }}
                    </p>
                  </div>

                  <div>
                    <h4 class="text-sm font-medium text-gray-500">振动值</h4>
                    <p class="mt-1 text-sm" :class="currentDevice ? currentDevice.vibrationColor : ''">
                      {{ currentDevice ? currentDevice.vibration : '' }}
                    </p>
                  </div>

                  <div>
                    <h4 class="text-sm font-medium text-gray-500">健康评分</h4>
                    <div class="mt-1 flex items-center">
                      <div class="text-sm font-medium" :class="currentDevice ? currentDevice.scoreColor : ''">
                        {{ currentDevice ? currentDevice.healthScore : '' }}
                      </div>
                      <div class="ml-2 w-16 bg-gray-200 rounded-full h-1.5">
                        <div class="h-1.5 rounded-full" :style="{
                          width: (currentDevice ? currentDevice.healthScore : 0) + '%',
                          backgroundColor: currentDevice ? currentDevice.scoreColor.replace('text-', 'bg-') : ''
                        }"></div>
                      </div>
                    </div>
                  </div>

                  <div>
                    <h4 class="text-sm font-medium text-gray-500">上次维护</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ currentDevice ? currentDevice.lastMaintenance : '' }}</p>
                  </div>
                </div>

                <div class="mt-6">
                  <h4 class="text-md font-medium text-gray-900 mb-3">设备参数</h4>
                  <div class="bg-gray-50 p-4 rounded-lg">
                    <div class="grid grid-cols-2 gap-3">
                      <div class="flex justify-between">
                        <span class="text-sm text-gray-500">额定功率</span>
                        <span class="text-sm text-gray-900">150 kW</span>
                      </div>
                      <div class="flex justify-between">
                        <span class="text-sm text-gray-500">工作压力</span>
                        <span class="text-sm text-gray-900">0.8 MPa</span>
                      </div>
                      <div class="flex justify-between">
                        <span class="text-sm text-gray-500">额定转速</span>
                        <span class="text-sm text-gray-900">2980 rpm</span>
                      </div>
                      <div class="flex justify-between">
                        <span class="text-sm text-gray-500">设计寿命</span>
                        <span class="text-sm text-gray-900">15 年</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button type="button"
              class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
              @click="closeDeviceDetailModal">
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 设备监控模态框 -->
    <div v-if="showMonitorModal" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" @click="closeMonitorModal">
          <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>&#8203;
        <div
          class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
          <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                <div class="flex justify-between items-center border-b pb-3">
                  <h3 class="text-lg leading-6 font-medium text-gray-900">
                    设备监控 - {{ currentDevice ? currentDevice.name : '' }}
                  </h3>
                  <button @click="closeMonitorModal" class="text-gray-400 hover:text-gray-500">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
                <div class="mt-4">
                  <div class="flex items-center mb-4">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center mr-3"
                      :class="currentDevice ? currentDevice.iconBg : ''">
                      <i
                        :class="(currentDevice ? currentDevice.icon : '') + ' ' + (currentDevice ? currentDevice.iconColor : '')"></i>
                    </div>
                    <div>
                      <div class="text-lg font-bold text-gray-900">{{ currentDevice ? currentDevice.name : '' }}</div>
                      <div class="text-gray-500 text-sm">ID: {{ currentDevice ? currentDevice.id : '' }}</div>
                    </div>
                    <div class="ml-auto flex items-center">
                      <span class="h-3 w-3 rounded-full mr-2"
                        :class="currentDevice ? currentDevice.statusColor : ''"></span>
                      <span class="text-sm font-medium"
                        :class="getStatusTextColor(currentDevice ? currentDevice.status : '')">
                        {{ currentDevice ? currentDevice.status : '' }}
                      </span>
                    </div>
                  </div>

                  <div class="grid grid-cols-3 gap-4 mb-6">
                    <div class="bg-blue-50 p-4 rounded-lg">
                      <div class="text-sm text-blue-700">当前负载</div>
                      <div class="text-2xl font-bold text-blue-900">{{ currentDevice ? currentDevice.load : '' }}</div>
                      <div class="w-full bg-blue-200 rounded-full h-2 mt-2">
                        <div class="h-2 rounded-full bg-blue-600"
                          :style="{ width: (currentDevice ? currentDevice.loadPercentage : 0) + '%' }"></div>
                      </div>
                    </div>

                    <div class="bg-orange-50 p-4 rounded-lg">
                      <div class="text-sm text-orange-700">温度</div>
                      <div class="text-2xl font-bold" :class="currentDevice ? currentDevice.tempColor : ''">
                        {{ currentDevice ? currentDevice.temperature : '' }}
                      </div>
                    </div>

                    <div class="bg-purple-50 p-4 rounded-lg">
                      <div class="text-sm text-purple-700">振动值</div>
                      <div class="text-2xl font-bold" :class="currentDevice ? currentDevice.vibrationColor : ''">
                        {{ currentDevice ? currentDevice.vibration : '' }}
                      </div>
                    </div>
                  </div>
                  <div>
                    <h4 class="text-md font-medium text-gray-900 mb-3">报警记录</h4>
                    <div class="bg-gray-50 rounded-lg overflow-hidden">
                      <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-100">
                          <tr>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">时间</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">报警类型</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">报警值</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">状态</th>
                          </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                          <tr>
                            <td class="px-4 py-2 text-sm text-gray-900">2025-07-08 14:35:22</td>
                            <td class="px-4 py-2 text-sm text-gray-900">温度过高</td>
                            <td class="px-4 py-2 text-sm text-gray-900">1450°C</td>
                            <td class="px-4 py-2 text-sm">
                              <span
                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                已处理
                              </span>
                            </td>
                          </tr>
                          <tr class="bg-red-50">
                            <td class="px-4 py-2 text-sm text-gray-900">2025-07-08 11:22:15</td>
                            <td class="px-4 py-2 text-sm text-gray-900">振动异常</td>
                            <td class="px-4 py-2 text-sm text-gray-900">4.2 mm/s</td>
                            <td class="px-4 py-2 text-sm">
                              <span
                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                未处理
                              </span>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button type="button"
              class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
              @click="closeMonitorModal">
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 设备维护模态框 -->
    <div v-if="showMaintenanceModal" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" @click="closeMaintenanceModal">
          <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>&#8203;
        <div
          class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full">
          <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                <div class="flex justify-between items-center border-b pb-3">
                  <h3 class="text-lg leading-6 font-medium text-gray-900">
                    设备维护 - {{ currentDevice ? currentDevice.name : '' }}
                  </h3>
                  <button @click="closeMaintenanceModal" class="text-gray-400 hover:text-gray-500">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
                <div class="mt-4">
                  <div class="flex items-center mb-6">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center mr-3"
                      :class="currentDevice ? currentDevice.iconBg : ''">
                      <i
                        :class="(currentDevice ? currentDevice.icon : '') + ' ' + (currentDevice ? currentDevice.iconColor : '')"></i>
                    </div>
                    <div>
                      <div class="text-lg font-bold text-gray-900">{{ currentDevice ? currentDevice.name : '' }}</div>
                      <div class="text-gray-500 text-sm">ID: {{ currentDevice ? currentDevice.id : '' }}</div>
                    </div>
                    <div class="ml-auto text-right">
                      <div class="text-sm text-gray-500">上次维护</div>
                      <div class="text-sm font-medium text-gray-900">{{ currentDevice ? currentDevice.lastMaintenance :
                        '' }}</div>
                    </div>
                  </div>
                  <div class="mb-6">
                    <h4 class="text-md font-medium text-gray-900 mb-3">维护记录</h4>
                    <div class="bg-gray-50 rounded-lg overflow-hidden">
                      <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-100">
                          <tr>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">维护时间</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">维护类型</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">维护人员</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">维护结果</th>
                          </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                          <tr v-for="(record, index) in getCurrentDeviceMaintenanceRecords()" :key="record.id || index">
                            <td class="px-4 py-2 text-sm text-gray-900">{{ record.time }}</td>
                            <td class="px-4 py-2 text-sm text-gray-900">{{ record.type }}</td>
                            <td class="px-4 py-2 text-sm text-gray-900">{{ record.person }}</td>
                            <td class="px-4 py-2 text-sm">
                              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
                                :class="record.resultClass">
                                {{ record.result }}
                              </span>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <div>
                    <h4 class="text-md font-medium text-gray-900 mb-3">新增维护记录</h4>
                    <div class="bg-gray-50 p-4 rounded-lg">
                      <div class="grid grid-cols-2 gap-4">
                        <div>
                          <label class="block text-sm font-medium text-gray-700 mb-1">维护类型</label>
                          <select v-model="maintenanceForm.type"
                            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
                            <option value="" disabled selected>请选择维护类型</option>
                            <option value="定期保养">定期保养</option>
                            <option value="故障维修">故障维修</option>
                            <option value="紧急抢修">紧急抢修</option>
                            <option value="预防性维护">预防性维护</option>
                          </select>
                        </div>

                        <div>
                          <label class="block text-sm font-medium text-gray-700 mb-1">维护时间</label>
                          <input v-model="maintenanceForm.dateTime" type="datetime-local"
                            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
                        </div>

                        <div>
                          <label class="block text-sm font-medium text-gray-700 mb-1">维护人员 *</label>
                          <input v-model="maintenanceForm.personnel" type="text" placeholder="请输入维护人员"
                            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
                        </div>

                        <div>
                          <label class="block text-sm font-medium text-gray-700 mb-1">维护结果</label>
                          <select v-model="maintenanceForm.result"
                            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
                            <option value="" disabled selected>请选择维护结果</option>
                            <option value="已完成">已完成</option>
                            <option value="维修中">维修中</option>
                            <option value="未解决">未解决</option>
                          </select>
                        </div>

                        <div class="col-span-2">
                          <label class="block text-sm font-medium text-gray-700 mb-1">维护详情</label>
                          <textarea v-model="maintenanceForm.details" rows="3" placeholder="请输入维护详情"
                            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"></textarea>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button type="button"
              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"
              @click="saveMaintenanceRecord">
              保存维护记录
            </button>
            <button type="button"
              class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
              @click="closeMaintenanceModal">
              取消
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 维护详情模态框 -->
    <div v-if="showMaintenanceDetailModal" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" @click="closeMaintenanceDetailModal">
          <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>&#8203;
        <div
          class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full">
          <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                <div class="flex justify-between items-center border-b pb-3">
                  <h3 class="text-lg leading-6 font-medium text-gray-900">
                    维护详情
                  </h3>
                  <button @click="closeMaintenanceDetailModal" class="text-gray-400 hover:text-gray-500">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
                <div class="mt-4" v-if="selectedMaintenanceRecord">
                  <div class="flex items-center mb-6">
                    <div class="w-12 h-12 rounded-full flex items-center justify-center mr-4"
                      :class="selectedMaintenanceRecord.iconBg">
                      <i :class="selectedMaintenanceRecord.icon + ' ' + selectedMaintenanceRecord.iconColor"></i>
                    </div>
                    <div>
                      <div class="text-xl font-bold text-gray-900">{{ selectedMaintenanceRecord.deviceName }}</div>
                      <div class="text-gray-500">ID: {{ selectedMaintenanceRecord.deviceId }}</div>
                    </div>
                  </div>

                  <div class="grid grid-cols-2 gap-4">
                    <div>
                      <h4 class="text-sm font-medium text-gray-500">维护类型</h4>
                      <p class="mt-1 text-sm text-gray-900">{{ selectedMaintenanceRecord.type }}</p>
                    </div>

                    <div>
                      <h4 class="text-sm font-medium text-gray-500">维护时间</h4>
                      <p class="mt-1 text-sm text-gray-900">{{ selectedMaintenanceRecord.time }}</p>
                    </div>

                    <div>
                      <h4 class="text-sm font-medium text-gray-500">维护人员</h4>
                      <p class="mt-1 text-sm text-gray-900">{{ selectedMaintenanceRecord.person }}</p>
                    </div>

                    <div>
                      <h4 class="text-sm font-medium text-gray-500">维护结果</h4>
                      <div class="mt-1">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
                          :class="selectedMaintenanceRecord.resultClass">
                          {{ selectedMaintenanceRecord.result }}
                        </span>
                      </div>
                    </div>

                    <div class="col-span-2">
                      <h4 class="text-sm font-medium text-gray-500">维护详情</h4>
                      <p class="mt-1 text-sm text-gray-900">{{ selectedMaintenanceRecord.details || '无详细说明' }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button type="button"
              class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
              @click="closeMaintenanceDetailModal">
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 全部维护记录模态框 -->
    <div v-if="showAllMaintenanceRecordsModal" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" @click="closeAllMaintenanceRecordsModal">
          <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>&#8203;
        <div
          class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-6xl sm:w-full">
          <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                <div class="flex justify-between items-center border-b pb-3">
                  <h3 class="text-lg leading-6 font-medium text-gray-900">
                    全部维护记录
                  </h3>
                  <button @click="closeAllMaintenanceRecordsModal" class="text-gray-400 hover:text-gray-500">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
                <div class="mt-4">
                  <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 rounded-lg overflow-hidden shadow-sm">
                      <thead>
                        <tr class="bg-gradient-to-r from-blue-50 to-indigo-50">
                          <th
                            class="px-6 py-4 text-left text-xs font-semibold text-blue-700 uppercase tracking-wider border-b border-blue-100">
                            <div class="flex items-center">
                              <i class="fas fa-toolbox mr-2 text-blue-500"></i>
                              设备名称
                            </div>
                          </th>
                          <th
                            class="px-6 py-4 text-left text-xs font-semibold text-blue-700 uppercase tracking-wider border-b border-blue-100">
                            <div class="flex items-center">
                              <i class="fas fa-tools mr-2 text-blue-500"></i>
                              维护类型
                            </div>
                          </th>
                          <th
                            class="px-6 py-4 text-left text-xs font-semibold text-blue-700 uppercase tracking-wider border-b border-blue-100">
                            <div class="flex items-center">
                              <i class="fas fa-clock mr-2 text-blue-500"></i>
                              维护时间
                            </div>
                          </th>
                          <th
                            class="px-6 py-4 text-left text-xs font-semibold text-blue-700 uppercase tracking-wider border-b border-blue-100">
                            <div class="flex items-center">
                              <i class="fas fa-user mr-2 text-blue-500"></i>
                              维护人员
                            </div>
                          </th>
                          <th
                            class="px-6 py-4 text-left text-xs font-semibold text-blue-700 uppercase tracking-wider border-b border-blue-100">
                            <div class="flex items-center">
                              <i class="fas fa-clipboard-check mr-2 text-blue-500"></i>
                              维护结果
                            </div>
                          </th>
                          <th
                            class="px-6 py-4 text-left text-xs font-semibold text-blue-700 uppercase tracking-wider border-b border-blue-100">
                            <div class="flex items-center">
                              <i class="fas fa-cog mr-2 text-blue-500"></i>
                              操作
                            </div>
                          </th>
                        </tr>
                      </thead>
                      <tbody class="bg-white divide-y divide-gray-100">
                        <tr v-for="(record, index) in maintenanceRecords" :key="record.id || index"
                          class="hover:bg-blue-50 transition-all duration-200 ease-in-out transform hover:scale-[1.002]">
                          <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                              <div class="w-10 h-10 rounded-full flex items-center justify-center mr-3 shadow-sm"
                                :class="record.iconBg">
                                <i :class="record.icon + ' ' + record.iconColor"></i>
                              </div>
                              <div>
                                <div class="text-sm font-medium text-gray-900">
                                  {{ record.deviceName }}
                                </div>
                                <div class="text-xs text-gray-500 font-mono">
                                  ID: {{ record.deviceId }}
                                </div>
                              </div>
                            </div>
                          </td>
                          <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">
                              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                                :class="getMaintenanceTypeClass(record.type)">
                                {{ record.type }}
                              </span>
                            </div>
                          </td>
                          <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900 font-medium">
                              {{ record.time }}
                            </div>
                          </td>
                          <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">
                              <div class="flex items-center">
                                <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center mr-2">
                                  <i class="fas fa-user text-blue-500 text-xs"></i>
                                </div>
                                {{ record.person }}
                              </div>
                            </div>
                          </td>
                          <td class="px-6 py-4 whitespace-nowrap">
                            <div class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold shadow-sm"
                              :class="record.resultClass">
                              <i class="mr-1" :class="getResultIcon(record.result)"></i>
                              {{ record.result }}
                            </div>
                          </td>
                          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-left">
                            <button
                              class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200 shadow-sm"
                              @click="viewMaintenanceDetailFromAll(record)">
                              <i class="fas fa-eye mr-1"></i> 查看详情
                            </button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button type="button"
              class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
              @click="closeAllMaintenanceRecordsModal">
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 全部预警信息模态框 -->
    <div v-if="showAllAlertsModal" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" @click="closeAllAlertsModal">
          <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>&#8203;
        <div
          class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
          <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                <div class="flex justify-between items-center border-b pb-3">
                  <h3 class="text-lg leading-6 font-medium text-gray-900">
                    全部预警信息
                  </h3>
                  <button @click="closeAllAlertsModal" class="text-gray-400 hover:text-gray-500">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
                <div class="mt-4">
                  <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                      <thead>
                        <tr>
                          <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                            预警信息
                          </th>
                          <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                            预警时间
                          </th>
                          <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                            预警级别
                          </th>
                          <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作
                          </th>
                        </tr>
                      </thead>
                      <tbody class="bg-white divide-y divide-gray-200">
                        <tr v-for="(alert, index) in alertMessages" :key="index" class="hover:bg-gray-50">
                          <td class="px-4 py-3">
                            <div class="flex items-center">
                              <div class="w-8 h-8 rounded-full flex items-center justify-center mr-3"
                                :class="alert.iconBg">
                                <i :class="alert.icon + ' ' + alert.iconColor"></i>
                              </div>
                              <div>
                                <div class="text-sm font-medium text-gray-900">
                                  {{ alert.title }}
                                </div>
                                <div class="text-xs text-gray-500">
                                  {{ alert.device }}
                                </div>
                              </div>
                            </div>
                          </td>
                          <td class="px-4 py-3">
                            <div class="text-sm text-gray-900">{{ alert.time }}</div>
                          </td>
                          <td class="px-4 py-3">
                            <div class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                              :class="alert.levelClass">
                              {{ alert.level }}
                            </div>
                          </td>
                          <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
                            <button @click="processAlertFromAll(alert)"
                              class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer">
                              处理
                            </button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button type="button"
              class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
              @click="closeAllAlertsModal">
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 处理预警信息模态框 -->
    <div v-if="showProcessAlertModal" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" @click="closeProcessAlertModal">
          <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>&#8203;
        <div
          class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
          <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                <div class="flex justify-between items-center border-b pb-3">
                  <h3 class="text-lg leading-6 font-medium text-gray-900">
                    处理预警信息
                  </h3>
                  <button @click="closeProcessAlertModal" class="text-gray-400 hover:text-gray-500">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
                <div class="mt-4" v-if="selectedAlert">
                  <div class="flex items-center mb-4">
                    <div class="w-12 h-12 rounded-full flex items-center justify-center mr-4"
                      :class="selectedAlert.iconBg">
                      <i :class="selectedAlert.icon + ' ' + selectedAlert.iconColor"></i>
                    </div>
                    <div>
                      <div class="text-xl font-bold text-gray-900">{{ selectedAlert.title }}</div>
                      <div class="text-gray-500">{{ selectedAlert.device }}</div>
                    </div>
                  </div>

                  <div class="grid grid-cols-2 gap-4 mb-4">
                    <div>
                      <h4 class="text-sm font-medium text-gray-500">预警时间</h4>
                      <p class="mt-1 text-sm text-gray-900">{{ selectedAlert.time }}</p>
                    </div>

                    <div>
                      <h4 class="text-sm font-medium text-gray-500">预警级别</h4>
                      <div class="mt-1">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
                          :class="selectedAlert.levelClass">
                          {{ selectedAlert.level }}
                        </span>
                      </div>
                    </div>
                  </div>

                  <div class="mb-4">
                    <h4 class="text-sm font-medium text-gray-500 mb-2">处理详情</h4>
                    <textarea rows="4" placeholder="请输入处理详情..."
                      class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
                    </textarea>
                  </div>

                  <div>
                    <h4 class="text-sm font-medium text-gray-500 mb-2">处理结果</h4>
                    <select
                      class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
                      <option>已解决</option>
                      <option>处理中</option>
                      <option>误报</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button type="button"
              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"
              @click="submitAlertProcess">
              提交处理
            </button>
            <button type="button"
              class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
              @click="closeProcessAlertModal">
              取消
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import Header from "../components/Header.vue";
import { ElMessageBox, ElMessage } from 'element-plus';

export default {
  components: {
    Header,
  },
  data() {
    return {
      currentTime: "2025-07-08 15:32:45",
      mainMenus: [
        {
          name: "监测报警",
          icon: "fas fa-bell",
          expanded: false,
          active: false,
          subMenus: [
            { name: "数据汇聚功能", active: false, link: "/data-aggregation" },
            {
              name: "监测指标统计",
              active: false,
              link: "/monitoring-indicators",
            },
            { name: "区域化展示", active: false, link: "/regional-display" },
          ],
        },
        {
          name: "风险研判",
          icon: "fas fa-exclamation-triangle",
          expanded: false,
          active: false,
          subMenus: [
            { name: '智能风险评估', active: false, link: '/intelligent-risk-assessment' },
                        { name: '预警信息推送', active: false, link: '/risk-warning-push' },
                        { name: '风险管理与分析', active: true, link: '/risk-analysis' },
                    ]
        },
        {
          name: "在线巡查",
          icon: "fas fa-search",
          expanded: false,
          active: false,
          subMenus: [
            {
              name: "企业信息汇总",
              active: false,
              link: "/summary-information",
            },
            { name: "巡查功能", active: false, link: "/patrol" },
            { name: "检索功能", active: false, link: "search" },
            { name: "一屏汇聚展示", active: false, link: "/screen-display" },
          ],
        },
        {
          name: "综合分析",
          icon: "fas fa-chart-line",
          expanded: true,
          active: true,
          subMenus: [
            { name: "联网与设备分析", active: true, link: "/equipment" },
            { name: "应用情况分析", active: false, link: "/application" },
            { name: "数据质量分析", active: false, link: "/data-quality" },
            { name: "定期专题报告", active: false, link: "report" },
          ],
        },
        {
          name: "系统管理",
          icon: "fas fa-cog",
          expanded: false,
          active: false,
          subMenus: [
            { name: "用户权限管理", active: false, link: "user-permission" },
            { name: "系统配置管理", active: false, link: "system-manage" },
            { name: "数据管理", active: false, link: "data-manage" },
            { name: "系统监控与维护", active: false, link: "monitoring" },
          ],
        },
      ],
      // 筛选相关
      dropdowns: {
        deviceType: false,
        status: false,
      },
      deviceTypes: [
        "冶炼设备",
        "轧制设备",
        "动力设备",
        "环保设备",
        "检测设备",
        "其他设备",
      ],
      selectedDeviceTypes: [],
      // 车间筛选相关
      dropdowns: {
        deviceType: false,
        status: false,
        workshop: false, // 车间下拉菜单控制
      },
      workshopOptions: [], // 车间选项数组
      selectedWorkshops: [], // 数组，支持多选
      statusOptions: [
        { label: "正常运行", value: "正常运行", color: "bg-green-500" },
        { label: "待机", value: "待机", color: "bg-blue-500" },
        { label: "故障", value: "故障", color: "bg-red-500" },
        { label: "维修中", value: "维修中", color: "bg-yellow-500" },
        { label: "停机", value: "停机", color: "bg-gray-500" },
      ],
      selectedStatuses: [],
      healthScoreMin: "",
      healthScoreMax: "",
      searchQuery: "",
      // 表格相关
      viewMode: "table",
      allColumns: [
        { key: "type", label: "设备类型" },
        { key: "workshop", label: "所属车间" },
        { key: "status", label: "运行状态" },
        { key: "load", label: "当前负载" },
        { key: "temperature", label: "温度" },
        { key: "vibration", label: "振动值" },
        { key: "healthScore", label: "健康评分" },
        { key: "lastMaintenance", label: "上次维护" },
      ],
      visibleColumns: this.getSavedVisibleColumns(),
      showColumnSelector: false,
      sortColumn: "healthScore",
      sortDirection: "desc",
      // 分页相关
      currentPage: 1,
      pageSize: 10,
      pageSizeOptions: [10, 20, 50, 100],
      // 选择相关
      selectAll: false,
      selectedDevices: [],
      // 设备数据
      devices: [
        {
          id: "DEV-HGL-001",
          name: "1号高炉",
          type: "冶炼设备",
          workshop: "炼铁车间",
          icon: "fas fa-fire",
          iconBg: "bg-red-100",
          iconColor: "text-red-600",
          status: "正常运行",
          statusColor: "bg-green-500",
          load: "85%",
          loadPercentage: 85,
          loadColor: "#48bb78",
          temperature: "1450 °C",
          tempColor: "text-orange-600",
          vibration: "2.4 mm/s",
          vibrationColor: "text-green-600",
          healthScore: 92,
          scoreColor: "text-green-600",
          lastMaintenance: "2025-06-15",
        },
        {
          id: "DEV-LLJ-002",
          name: "2号连铸机",
          type: "冶炼设备",
          workshop: "连铸车间",
          icon: "fas fa-industry",
          iconBg: "bg-blue-100",
          iconColor: "text-blue-600",
          status: "正常运行",
          statusColor: "bg-green-500",
          load: "78%",
          loadPercentage: 78,
          loadColor: "#48bb78",
          temperature: "320 °C",
          tempColor: "text-yellow-600",
          vibration: "3.1 mm/s",
          vibrationColor: "text-yellow-600",
          healthScore: 85,
          scoreColor: "text-yellow-600",
          lastMaintenance: "2025-06-20",
        },
        {
          id: "DEV-ZLU-003",
          name: "3号转炉",
          type: "冶炼设备",
          workshop: "炼钢车间",
          icon: "fas fa-fire-alt",
          iconBg: "bg-orange-100",
          iconColor: "text-orange-600",
          status: "警告",
          statusColor: "bg-yellow-500",
          load: "92%",
          loadPercentage: 92,
          loadColor: "#ed8936",
          temperature: "1580 °C",
          tempColor: "text-red-600",
          vibration: "4.2 mm/s",
          vibrationColor: "text-red-600",
          healthScore: 76,
          scoreColor: "text-yellow-600",
          lastMaintenance: "2025-06-25",
        },
        {
          id: "DEV-RZJ-004",
          name: "热轧机组",
          type: "轧制设备",
          workshop: "热轧车间",
          icon: "fas fa-cogs",
          iconBg: "bg-purple-100",
          iconColor: "text-purple-600",
          status: "正常运行",
          statusColor: "bg-green-500",
          load: "65%",
          loadPercentage: 65,
          loadColor: "#4299e1",
          temperature: "850 °C",
          tempColor: "text-orange-600",
          vibration: "2.8 mm/s",
          vibrationColor: "text-yellow-600",
          healthScore: 88,
          scoreColor: "text-green-600",
          lastMaintenance: "2025-06-18",
        },
        {
          id: "DEV-LZJ-005",
          name: "冷轧机组",
          type: "轧制设备",
          workshop: "冷轧车间",
          icon: "fas fa-snowflake",
          iconBg: "bg-teal-100",
          iconColor: "text-teal-600",
          status: "故障",
          statusColor: "bg-red-500",
          load: "0%",
          loadPercentage: 0,
          loadColor: "#a0aec0",
          temperature: "45 °C",
          tempColor: "text-green-600",
          vibration: "0.5 mm/s",
          vibrationColor: "text-green-600",
          healthScore: 65,
          scoreColor: "text-red-600",
          lastMaintenance: "2025-07-01",
        },
        {
          id: "DEV-JDJ-006",
          name: "精轧机组",
          type: "轧制设备",
          workshop: "精轧车间",
          icon: "fas fa-cog",
          iconBg: "bg-indigo-100",
          iconColor: "text-indigo-600",
          status: "正常运行",
          statusColor: "bg-green-500",
          load: "72%",
          loadPercentage: 72,
          loadColor: "#48bb78",
          temperature: "320 °C",
          tempColor: "text-yellow-600",
          vibration: "2.1 mm/s",
          vibrationColor: "text-green-600",
          healthScore: 90,
          scoreColor: "text-green-600",
          lastMaintenance: "2025-06-10",
        },
        {
          id: "DEV-FDJ-007",
          name: "1号风机",
          type: "动力设备",
          workshop: "动力车间",
          icon: "fas fa-wind",
          iconBg: "bg-blue-100",
          iconColor: "text-blue-600",
          status: "正常运行",
          statusColor: "bg-green-500",
          load: "65%",
          loadPercentage: 65,
          loadColor: "#48bb78",
          temperature: "75 °C",
          tempColor: "text-yellow-600",
          vibration: "3.5 mm/s",
          vibrationColor: "text-yellow-600",
          healthScore: 82,
          scoreColor: "text-green-600",
          lastMaintenance: "2025-06-28",
        },
        {
          id: "DEV-FDJ-008",
          name: "2号风机",
          type: "动力设备",
          workshop: "动力车间",
          icon: "fas fa-wind",
          iconBg: "bg-blue-100",
          iconColor: "text-blue-600",
          status: "待机",
          statusColor: "bg-blue-500",
          load: "0%",
          loadPercentage: 0,
          loadColor: "#a0aec0",
          temperature: "25 °C",
          tempColor: "text-green-600",
          vibration: "0.2 mm/s",
          vibrationColor: "text-green-600",
          healthScore: 95,
          scoreColor: "text-green-600",
          lastMaintenance: "2025-06-22",
        },
        {
          id: "DEV-YSJ-009",
          name: "1号压缩机",
          type: "动力设备",
          workshop: "动力车间",
          icon: "fas fa-compress-arrows-alt",
          iconBg: "bg-yellow-100",
          iconColor: "text-yellow-600",
          status: "正常运行",
          statusColor: "bg-green-500",
          load: "88%",
          loadPercentage: 88,
          loadColor: "#ed8936",
          temperature: "85 °C",
          tempColor: "text-yellow-600",
          vibration: "2.9 mm/s",
          vibrationColor: "text-yellow-600",
          healthScore: 78,
          scoreColor: "text-yellow-600",
          lastMaintenance: "2025-07-02",
        },
        {
          id: "DEV-YSJ-010",
          name: "2号压缩机",
          type: "动力设备",
          workshop: "动力车间",
          icon: "fas fa-compress-arrows-alt",
          iconBg: "bg-yellow-100",
          iconColor: "text-yellow-600",
          status: "维修中",
          statusColor: "bg-yellow-500",
          load: "0%",
          loadPercentage: 0,
          loadColor: "#a0aec0",
          temperature: "30 °C",
          tempColor: "text-green-600",
          vibration: "0.3 mm/s",
          vibrationColor: "text-green-600",
          healthScore: 70,
          scoreColor: "text-yellow-600",
          lastMaintenance: "2025-07-05",
        },
        {
          id: "DEV-FQJ-011",
          name: "1号废气净化器",
          type: "环保设备",
          workshop: "环保车间",
          icon: "fas fa-leaf",
          iconBg: "bg-green-100",
          iconColor: "text-green-600",
          status: "正常运行",
          statusColor: "bg-green-500",
          load: "75%",
          loadPercentage: 75,
          loadColor: "#48bb78",
          temperature: "65 °C",
          tempColor: "text-green-600",
          vibration: "1.8 mm/s",
          vibrationColor: "text-green-600",
          healthScore: 86,
          scoreColor: "text-green-600",
          lastMaintenance: "2025-06-12",
        },
        {
          id: "DEV-FQJ-012",
          name: "2号废气净化器",
          type: "环保设备",
          workshop: "环保车间",
          icon: "fas fa-leaf",
          iconBg: "bg-green-100",
          iconColor: "text-green-600",
          status: "故障",
          statusColor: "bg-red-500",
          load: "0%",
          loadPercentage: 0,
          loadColor: "#a0aec0",
          temperature: "25 °C",
          tempColor: "text-green-600",
          vibration: "4.5 mm/s",
          vibrationColor: "text-red-600",
          healthScore: 60,
          scoreColor: "text-red-600",
          lastMaintenance: "2025-06-30",
        },
        {
          id: "DEV-JSQ-013",
          name: "1号检测器",
          type: "检测设备",
          workshop: "质检车间",
          icon: "fas fa-microscope",
          iconBg: "bg-purple-100",
          iconColor: "text-purple-600",
          status: "正常运行",
          statusColor: "bg-green-500",
          load: "60%",
          loadPercentage: 60,
          loadColor: "#4299e1",
          temperature: "35 °C",
          tempColor: "text-green-600",
          vibration: "1.2 mm/s",
          vibrationColor: "text-green-600",
          healthScore: 94,
          scoreColor: "text-green-600",
          lastMaintenance: "2025-06-25",
        },
        {
          id: "DEV-JSQ-014",
          name: "2号检测器",
          type: "检测设备",
          workshop: "质检车间",
          icon: "fas fa-microscope",
          iconBg: "bg-purple-100",
          iconColor: "text-purple-600",
          status: "正常运行",
          statusColor: "bg-green-500",
          load: "55%",
          loadPercentage: 55,
          loadColor: "#4299e1",
          temperature: "32 °C",
          tempColor: "text-green-600",
          vibration: "1.1 mm/s",
          vibrationColor: "text-green-600",
          healthScore: 92,
          scoreColor: "text-green-600",
          lastMaintenance: "2025-06-20",
        },
        {
          id: "DEV-JSQ-015",
          name: "3号检测器",
          type: "检测设备",
          workshop: "质检车间",
          icon: "fas fa-microscope",
          iconBg: "bg-purple-100",
          iconColor: "text-purple-600",
          status: "停机",
          statusColor: "bg-gray-500",
          load: "0%",
          loadPercentage: 0,
          loadColor: "#a0aec0",
          temperature: "25 °C",
          tempColor: "text-green-600",
          vibration: "0.1 mm/s",
          vibrationColor: "text-green-600",
          healthScore: 88,
          scoreColor: "text-green-600",
          lastMaintenance: "2025-07-01",
        },
      ],
      // 维护记录
      maintenanceRecords: this.getSavedMaintenanceRecords() || [
        {
          deviceName: "2号压缩机",
          deviceId: "DEV-YSJ-010",
          icon: "fas fa-compress-arrows-alt",
          iconBg: "bg-yellow-100",
          iconColor: "text-yellow-600",
          type: "故障维修",
          time: "2025-07-05 09:15",
          person: "李工程师",
          result: "维修中",
          resultClass: "bg-yellow-100 text-yellow-800",
        },
        {
          id: "DEV-LZJ-005",
          deviceName: "冷轧机组",
          deviceId: "DEV-LZJ-005",
          icon: "fas fa-snowflake",
          iconBg: "bg-teal-100",
          iconColor: "text-teal-600",
          type: "故障维修",
          time: "2025-07-01 14:30",
          person: "张技术员",
          result: "未解决",
          resultClass: "bg-red-100 text-red-800",
        },
        {
          id: "DEV-FQJ-011",
          deviceName: "1号废气净化器",
          deviceId: "DEV-FQJ-011",
          icon: "fas fa-leaf",
          iconBg: "bg-green-100",
          iconColor: "text-green-600",
          type: "定期保养",
          time: "2025-06-12 10:00",
          person: "王维护",
          result: "已完成",
          resultClass: "bg-green-100 text-green-800",
        },
        {
          id: "DEV-HGL-001",
          deviceName: "1号高炉",
          deviceId: "DEV-HGL-001",
          icon: "fas fa-fire",
          iconBg: "bg-red-100",
          iconColor: "text-red-600",
          type: "定期保养",
          time: "2025-06-15 08:45",
          person: "刘主管",
          result: "已完成",
          resultClass: "bg-green-100 text-green-800",
        },
        {
          id: "DEV-FQJ-012",
          deviceName: "2号废气净化器",
          deviceId: "DEV-FQJ-012",
          icon: "fas fa-leaf",
          iconBg: "bg-green-100",
          iconColor: "text-green-600",
          type: "故障维修",
          time: "2025-06-30 16:20",
          person: "赵工程师",
          result: "未解决",
          resultClass: "bg-red-100 text-red-800",
        },
      ],
      // 预警信息
      alertMessages: [
        {
          id: "alert-001",
          title: "设备温度异常",
          time: "2025-07-08 14:35",
          device: "3号转炉 (DEV-ZLU-003)",
          level: "严重",
          levelClass: "bg-red-100 text-red-800",
          icon: "fas fa-temperature-high",
          iconBg: "bg-red-100",
          iconColor: "text-red-600",
        },
        {
          id: "alert-002",
          title: "振动值超标",
          time: "2025-07-08 13:22",
          device: "2号废气净化器 (DEV-FQJ-012)",
          level: "严重",
          levelClass: "bg-red-100 text-red-800",
          icon: "fas fa-exclamation-triangle",
          iconBg: "bg-red-100",
          iconColor: "text-red-600",
        },
        {
          id: "alert-003",
          title: "负载过高",
          time: "2025-07-08 11:45",
          device: "1号压缩机 (DEV-YSJ-009)",
          level: "警告",
          levelClass: "bg-yellow-100 text-yellow-800",
          icon: "fas fa-exclamation-circle",
          iconBg: "bg-yellow-100",
          iconColor: "text-yellow-600",
        },
        {
          id: "alert-004",
          title: "设备离线",
          time: "2025-07-08 10:18",
          device: "冷轧机组 (DEV-LZJ-005)",
          level: "严重",
          levelClass: "bg-red-100 text-red-800",
          icon: "fas fa-plug",
          iconBg: "bg-red-100",
          iconColor: "text-red-600",
        },
        {
          id: "alert-005",
          title: "润滑油压力低",
          time: "2025-07-08 09:05",
          device: "热轧机组 (DEV-RZJ-004)",
          level: "警告",
          levelClass: "bg-yellow-100 text-yellow-800",
          icon: "fas fa-oil-can",
          iconBg: "bg-yellow-100",
          iconColor: "text-yellow-600",
        },
      ],
      // 已处理预警的存储
      processedAlerts: this.getSavedProcessedAlerts() || [],
      // 当前选中的设备
      currentDevice: null,
      // 控制模态框显示
      showDeviceDetailModal: false,
      showMonitorModal: false,
      showMaintenanceModal: false,
      showBatchDetailModal: false, // 批量详情模态框控制
      showMaintenanceDetailModal: false, // 维护详情模态框控制
      showAllMaintenanceRecordsModal: false, // 全部维护记录模态框控制
      showAllAlertsModal: false, // 全部预警信息模态框控制
      showProcessAlertModal: false, // 处理预警信息模态框控制
      selectedMaintenanceRecord: null, // 选中的维护记录
      selectedAlert: null, // 选中的预警信息
      // 维护表单数据
      maintenanceForm: {
        type: '',
        dateTime: '',
        personnel: '',
        result: '',
        details: ''
      },
    };
  },
  computed: {
    totalDevices() {
      return this.filteredDevices.length;
    },
    totalPages() {
      return Math.ceil(this.totalDevices / this.pageSize);
    },
    displayedPages() {
      const pages = [];
      const maxVisiblePages = 5;
      if (this.totalPages <= maxVisiblePages) {
        // 如果总页数少于或等于最大可见页数，显示所有页码
        for (let i = 1; i <= this.totalPages; i++) {
          pages.push(i);
        }
      } else {
        // 显示当前页附近的页码
        let startPage = Math.max(
          1,
          this.currentPage - Math.floor(maxVisiblePages / 2)
        );
        let endPage = startPage + maxVisiblePages - 1;
        if (endPage > this.totalPages) {
          endPage = this.totalPages;
          startPage = Math.max(1, endPage - maxVisiblePages + 1);
        }
        for (let i = startPage; i <= endPage; i++) {
          pages.push(i);
        }
      }
      return pages;
    },
    filteredDevices() {
      let result = [...this.devices];
      // 按设备类型筛选
      if (this.selectedDeviceTypes.length > 0) {
        result = result.filter((device) =>
          this.selectedDeviceTypes.includes(device.type)
        );
      }
      // 按所属车间筛选
      if (this.selectedWorkshops.length > 0) {
        result = result.filter((device) =>
          this.selectedWorkshops.includes(device.workshop)
        );
      }
      // 按运行状态筛选
      if (this.selectedStatuses.length > 0) {
        result = result.filter((device) =>
          this.selectedStatuses.includes(device.status)
        );
      }
      // 按健康评分筛选
      if (this.healthScoreMin !== "") {
        result = result.filter(
          (device) => device.healthScore >= parseInt(this.healthScoreMin)
        );
      }
      if (this.healthScoreMax !== "") {
        result = result.filter(
          (device) => device.healthScore <= parseInt(this.healthScoreMax)
        );
      }
      // 按搜索关键词筛选
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        result = result.filter(
          (device) =>
            device.id.toLowerCase().includes(query) ||
            device.name.toLowerCase().includes(query)
        );
      }
      // 排序
      if (this.sortColumn) {
        result.sort((a, b) => {
          let aValue = a[this.sortColumn];
          let bValue = b[this.sortColumn];
          // 处理特殊字段
          if (this.sortColumn === "load") {
            aValue = parseInt(a.loadPercentage);
            bValue = parseInt(b.loadPercentage);
          } else if (this.sortColumn === "temperature") {
            aValue = parseInt(a.temperature);
            bValue = parseInt(b.temperature);
          } else if (this.sortColumn === "vibration") {
            aValue = parseFloat(a.vibration);
            bValue = parseFloat(b.vibration);
          }
          if (this.sortDirection === "asc") {
            return aValue > bValue ? 1 : -1;
          } else {
            return aValue < bValue ? 1 : -1;
          }
        });
      }
      return result;
    },
    paginatedDevices() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredDevices.slice(start, end);
    },
    visibleColumnsData() {
      return this.allColumns.filter((col) =>
        this.visibleColumns.includes(col.key)
      );
    },
  },
  mounted() {
    this.initDeviceStatusChart();
    this.initHealthScoreChart();
    // 初始化车间选项
    this.initWorkshopOptions();
    // 初始化预警数据
    this.initAlertData();
    // 响应窗口大小变化
    window.addEventListener("resize", this.handleResize);
    // 更新时间
    this.updateCurrentTime();
    setInterval(this.updateCurrentTime, 1000);
    // 点击页面其他区域关闭下拉菜单
    document.addEventListener("click", this.handleOutsideClick);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
    document.removeEventListener("click", this.handleOutsideClick);
    clearInterval(this.timeInterval);
  },
  methods: {
    // 刷新数据
    refreshData() {
      // 模拟数据刷新
      setTimeout(() => {
        // 在实际应用中，这里应该是从API重新获取数据
        // 为了演示，我们随机更新一些设备数据
        this.devices = this.devices.map((device) => {
          // 随机更新一些数值
          const updatedDevice = { ...device };
          // 随机更新负载 (±5%范围内)
          const loadChange = (Math.random() - 0.5) * 10;
          let newLoadPercentage = updatedDevice.loadPercentage + loadChange;
          newLoadPercentage = Math.max(0, Math.min(100, newLoadPercentage));
          updatedDevice.loadPercentage = Math.round(newLoadPercentage);
          updatedDevice.load = `${updatedDevice.loadPercentage}%`;
          // 随机更新温度 (±10°C范围内)
          const tempChange = (Math.random() - 0.5) * 20;
          const tempValue = parseInt(updatedDevice.temperature) + tempChange;
          updatedDevice.temperature = `${Math.round(tempValue)} °C`;
          // 随机更新振动值 (±0.5 mm/s范围内)
          const vibChange = (Math.random() - 0.5) * 1;
          const vibValue = parseFloat(updatedDevice.vibration) + vibChange;
          updatedDevice.vibration = `${Math.max(0, vibValue).toFixed(1)} mm/s`;
          // 随机更新健康评分 (±3分范围内)
          const scoreChange = (Math.random() - 0.5) * 6;
          let newScore = updatedDevice.healthScore + scoreChange;
          newScore = Math.max(0, Math.min(100, newScore));
          updatedDevice.healthScore = Math.round(newScore);
          // 根据健康评分更新颜色
          if (updatedDevice.healthScore >= 90) {
            updatedDevice.scoreColor = "text-green-600";
          } else if (updatedDevice.healthScore >= 80) {
            updatedDevice.scoreColor = "text-yellow-600";
          } else if (updatedDevice.healthScore >= 70) {
            updatedDevice.scoreColor = "text-orange-600";
          } else {
            updatedDevice.scoreColor = "text-red-600";
          }

          return updatedDevice;
        });

        
      }, 1000);
    },
    // 获取保存的列显示设置
    getSavedVisibleColumns() {
      try {
        const saved = localStorage.getItem("device_visible_columns");
        if (saved) {
          const parsed = JSON.parse(saved);
          // 验证数据有效性
          if (Array.isArray(parsed) && parsed.length > 0) {
            return parsed;
          }
        }
      } catch (error) {
      }
      // 默认显示的列
      return [
        "type",
        "workshop",
        "status",
        "load",
        "temperature",
        "vibration",
        "healthScore",
      ];
    },
    // 保存列显示设置
    saveVisibleColumns() {
      try {
        localStorage.setItem(
          "device_visible_columns",
          JSON.stringify(this.visibleColumns)
        );
        
      } catch (error) {
      }
    },
    toggleMenu(index) {
      this.mainMenus[index].expanded = !this.mainMenus[index].expanded;
      // 如果展开了菜单，则将其他菜单收起
      if (this.mainMenus[index].expanded) {
        this.mainMenus.forEach((menu, i) => {
          if (i !== index) {
            menu.expanded = false;
          }
        });
      }
    },
    selectSubmenu(menuIndex, submenuIndex) {
      // 重置所有菜单的激活状态
      this.mainMenus.forEach((menu) => {
        menu.active = false;
        menu.subMenus.forEach((submenu) => {
          submenu.active = false;
        });
      });
      // 设置当前选中的菜单和子菜单为激活状态
      this.mainMenus[menuIndex].active = true;
      this.mainMenus[menuIndex].subMenus[submenuIndex].active = true;
    },
    updateCurrentTime() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    handleResize() {
      // 获取所有图表实例并调整大小
      const chartRefs = [
        this.$refs.deviceStatusChart,
        this.$refs.healthScoreChart,
      ];
      chartRefs.forEach((ref) => {
        if (ref) {
          const chart = echarts.getInstanceByDom(ref);
          if (chart) {
            chart.resize();
          }
        }
      });
    },
    toggleDropdown(type) {
      // 关闭其他下拉菜单
      Object.keys(this.dropdowns).forEach((key) => {
        if (key !== type) {
          this.dropdowns[key] = false;
        }
      });
      // 切换当前下拉菜单
      this.dropdowns[type] = !this.dropdowns[type];
    },
    handleOutsideClick(event) {
      // 如果点击的不是下拉菜单内的元素，则关闭所有下拉菜单
      if (!event.target.closest(".relative")) {
        Object.keys(this.dropdowns).forEach((key) => {
          this.dropdowns[key] = false;
        });
        this.showColumnSelector = false;
      }
    },
    searchDevices() {
      // 重置到第一页
      this.currentPage = 1;
    },
    resetFilters() {
      this.selectedDeviceTypes = [];
      this.selectedWorkshops = [];
      this.selectedStatuses = [];
      this.healthScoreMin = "";
      this.healthScoreMax = "";
      this.searchQuery = "";
      this.currentPage = 1;
    },
    toggleColumnSelector() {
      this.showColumnSelector = !this.showColumnSelector;
    },
    isColumnVisible(columnKey) {
      return this.visibleColumns.includes(columnKey);
    },
    sortBy(column) {
      if (this.sortColumn === column) {
        // 如果已经按这列排序，则切换排序方向
        this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc";
      } else {
        // 否则，按新列排序，默认降序
        this.sortColumn = column;
        this.sortDirection = "desc";
      }
    },
    goToPage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page;
      }
    },
    toggleSelectAll() {
      if (this.selectAll) {
        // 选中当前页所有设备
        this.selectedDevices = this.paginatedDevices.map((device) => device.id);
      } else {
        // 取消选中所有设备
        this.selectedDevices = [];
      }
    },
    getStatusTextColor(status) {
      switch (status) {
        case "正常运行":
          return "text-green-600";
        case "待机":
          return "text-blue-600";
        case "故障":
          return "text-red-600";
        case "维修中":
          return "text-yellow-600";
        case "停机":
          return "text-gray-600";
        case "警告":
          return "text-yellow-600";
        default:
          return "text-gray-600";
      }
    },
    // 处理预警信息
    async handleAlert(alert, index) {
  // 在实际应用中，这里可以打开一个模态框或跳转到处理页面
  await ElMessageBox.alert(
    `正在处理预警: ${alert.title}\n设备: ${alert.device}\n时间: ${alert.time}`,
    '处理预警',
    {
      confirmButtonText: '确定',
      type: 'info'
    }
  );
  // 从列表中移除已处理的预警
  this.alertMessages.splice(index, 1);
},
    // 处理批量查看
    async handleBatchOperation() {
  if (this.selectedDevices.length === 0) {
    await ElMessageBox.alert('请至少选择一个设备', '提示', {
      confirmButtonText: '确定',
      type: 'warning'
    });
    return;
  }
  // 显示批量设备详情模态框
  this.showBatchDetailModal = true;
},
    // 关闭批量详情模态框
    closeBatchDetailModal() {
      this.showBatchDetailModal = false;
    },
    // 获取选中的设备
    getSelectedDevices() {
      return this.devices.filter(device => this.selectedDevices.includes(device.id));
    },
    // 查看设备详情
    viewDeviceDetails(device) {
      
      // 设置当前设备并显示详情模态框
      this.currentDevice = device;
      this.showDeviceDetailModal = true;
    },
    // 监控设备
    monitorDevice(device) {
      
      // 设置当前设备并显示监控模态框
      this.currentDevice = device;
      this.showMonitorModal = true;
    },
    // 维护设备
    maintainDevice(device) {
      
      // 设置当前设备并显示维护模态框
      this.currentDevice = device;
      // 初始化维护表单
      this.maintenanceForm = {
        type: '',
        dateTime: '',
        personnel: '',
        result: '',
        details: ''
      };
      this.showMaintenanceModal = true;
    },
    getSavedMaintenanceRecords() {
      try {
        const saved = localStorage.getItem("device_maintenance_records");
        if (saved) {
          const parsed = JSON.parse(saved);
          if (Array.isArray(parsed) && parsed.length > 0) {
            return parsed;
          }
        }
      } catch (error) {
      }
      return null;
    },
    // 保存维护记录到本地存储
    saveMaintenanceRecords() {
      try {
        localStorage.setItem(
          "device_maintenance_records",
          JSON.stringify(this.maintenanceRecords)
        );
        
      } catch (error) {

      }
    },
    // 保存维护记录
    async saveMaintenanceRecord() {
      // 验证表单数据
      if (!this.maintenanceForm.type || !this.maintenanceForm.dateTime ||
        !this.maintenanceForm.personnel || !this.maintenanceForm.result) {
        await ElMessageBox.alert('请填写所有必填字段', '提示', {
      confirmButtonText: '确定',
      type: 'warning'
    });
        return;
      }
      // 创建新的维护记录
      const newRecord = {
        id: Date.now(),
        deviceName: this.currentDevice.name,
        deviceId: this.currentDevice.id,
        icon: this.currentDevice.icon,
        iconBg: this.currentDevice.iconBg,
        iconColor: this.currentDevice.iconColor,
        type: this.maintenanceForm.type,
        time: this.maintenanceForm.dateTime,
        person: this.maintenanceForm.personnel,
        result: this.maintenanceForm.result,
        details: this.maintenanceForm.details,
        resultClass: this.getMaintenanceResultClass(this.maintenanceForm.result)
      };
      // 将新记录添加到维护记录列表的开头
      this.maintenanceRecords.unshift(newRecord);
      // 更新设备的上次维护时间
      if (this.currentDevice) {
        this.currentDevice.lastMaintenance = new Date(this.maintenanceForm.dateTime).toLocaleDateString('zh-CN');
        // 同时更新设备列表中的维护时间
        const deviceIndex = this.devices.findIndex(device => device.id === this.currentDevice.id);
        if (deviceIndex !== -1) {
          this.devices[deviceIndex].lastMaintenance = new Date(this.maintenanceForm.dateTime).toLocaleDateString('zh-CN');
        }
      }
      // 保存到localStorage
      this.saveMaintenanceRecords();
      // 显示成功消息
      ElMessage.success(`设备 "${this.currentDevice.name}" 的维护记录已保存`);
      // 关闭模态框
      this.closeMaintenanceModal();
      // 重置表单
      this.maintenanceForm = {
        type: '',
        dateTime: '',
        personnel: '',
        result: '',
        details: ''
      };

    },
    // 获取维护结果的CSS类
    getMaintenanceResultClass(result) {
      switch (result) {
        case '已完成':
          return 'bg-green-100 text-green-800';
        case '维修中':
          return 'bg-yellow-100 text-yellow-800';
        case '未解决':
          return 'bg-red-100 text-red-800';
        default:
          return 'bg-gray-100 text-gray-800';
      }
    },
    // 获取当前设备的维护记录
    getCurrentDeviceMaintenanceRecords() {
      if (!this.currentDevice) return [];
      return this.maintenanceRecords.filter(record =>
        record.deviceId === this.currentDevice.id
      );
    },
    // 查看维护详情
    viewMaintenanceDetail(record) {
      this.selectedMaintenanceRecord = record;
      this.showMaintenanceDetailModal = true;
    },
    // 查看全部维护记录
    viewAllMaintenanceRecords() {
      this.showAllMaintenanceRecordsModal = true;
    },

    // 关闭设备详情模态框
    closeDeviceDetailModal() {
      this.showDeviceDetailModal = false;
    },
    // 关闭监控模态框
    closeMonitorModal() {
      this.showMonitorModal = false;
    },
    // 关闭维护模态框
    closeMaintenanceModal() {
      this.showMaintenanceModal = false;
    },
    // 关闭维护详情模态框
    closeMaintenanceDetailModal() {
      this.showMaintenanceDetailModal = false;
      this.selectedMaintenanceRecord = null;
    },
    // 关闭全部维护记录模态框
    closeAllMaintenanceRecordsModal() {
      this.showAllMaintenanceRecordsModal = false;
    },
    // 在查看全部记录时查看详情
    viewMaintenanceDetailFromAll(record) {
      // 先关闭全部记录模态框
      this.closeAllMaintenanceRecordsModal();
      // 然后打开详情模态框
      this.viewMaintenanceDetail(record);
    },
    // 获取维护类型对应的样式类
    getMaintenanceTypeClass(type) {
      const typeClasses = {
        '定期保养': 'bg-green-100 text-green-800',
        '故障维修': 'bg-red-100 text-red-800',
        '紧急抢修': 'bg-orange-100 text-orange-800',
        '预防性维护': 'bg-blue-100 text-blue-800'
      };
      return typeClasses[type] || 'bg-gray-100 text-gray-800';
    },
    // 获取维护结果对应的图标
    getResultIcon(result) {
      const resultIcons = {
        '已完成': 'fas fa-check-circle',
        '维修中': 'fas fa-tools',
        '未解决': 'fas fa-exclamation-triangle'
      };
      return resultIcons[result] || 'fas fa-info-circle';
    },
    // 查看全部预警信息
    viewAllAlerts() {
      this.showAllAlertsModal = true;
    },
    // 关闭全部预警信息模态框
    closeAllAlertsModal() {
      this.showAllAlertsModal = false;
    },
    // 处理预警信息
    processAlert(alert) {
      this.selectedAlert = alert;
      this.showProcessAlertModal = true;
    },
    // 关闭处理预警信息模态框
    closeProcessAlertModal() {
      this.showProcessAlertModal = false;
      this.selectedAlert = null;
    },
    // 提交预警处理
    async submitAlertProcess() {
      if (this.selectedAlert) {
        // 将预警添加到已处理列表
        this.processedAlerts.push({
          id: this.selectedAlert.id,
          title: this.selectedAlert.title,
          device: this.selectedAlert.device,
          processedTime: new Date().toLocaleString('zh-CN')
        });
        // 保存到本地存储
        this.saveProcessedAlerts();
        // 重新过滤预警列表
        this.alertMessages = this.filterProcessedAlerts();
        // 显示成功消息
        ElMessage.success(`预警 "${this.selectedAlert.title}" 已处理`);
        // 关闭模态框
        this.closeProcessAlertModal();
      }
    },
    // 初始化预警数据
    initAlertData() {
      this.alertMessages = this.filterProcessedAlerts();
    },
    // 处理预警信息（从全部预警信息模态框中）
    processAlertFromAll(alert) {
      // 先关闭全部预警信息模态框
      this.closeAllAlertsModal();
      // 然后打开处理预警信息模态框
      this.processAlert(alert);
    },
    // 获取已保存的已处理预警
    getSavedProcessedAlerts() {
      try {
        const saved = localStorage.getItem("processed_alerts");
        if (saved) {
          const parsed = JSON.parse(saved);
          if (Array.isArray(parsed)) {
            return parsed;
          }
        }
      } catch (error) {
      }
      return null;
    },
    // 保存已处理预警到本地存储
    saveProcessedAlerts() {
      try {
        localStorage.setItem(
          "processed_alerts",
          JSON.stringify(this.processedAlerts)
        );
        
      } catch (error) {
      }
    },
    // 过滤掉已处理的预警
    filterProcessedAlerts() {
      // 在实际应用中，这里应该是从API获取所有预警
      // 然后过滤掉已处理的预警
      const allAlerts = [
        {
          title: "设备温度异常",
          time: "2025-07-08 14:35",
          device: "3号转炉 (DEV-ZLU-003)",
          level: "严重",
          levelClass: "bg-red-100 text-red-800",
          icon: "fas fa-temperature-high",
          iconBg: "bg-red-100",
          iconColor: "text-red-600",
          id: "alert-001" // 添加唯一标识
        },
        {
          title: "振动值超标",
          time: "2025-07-08 13:22",
          device: "2号废气净化器 (DEV-FQJ-012)",
          level: "严重",
          levelClass: "bg-red-100 text-red-800",
          icon: "fas fa-exclamation-triangle",
          iconBg: "bg-red-100",
          iconColor: "text-red-600",
          id: "alert-002"
        },
        {
          title: "负载过高",
          time: "2025-07-08 11:45",
          device: "1号压缩机 (DEV-YSJ-009)",
          level: "警告",
          levelClass: "bg-yellow-100 text-yellow-800",
          icon: "fas fa-exclamation-circle",
          iconBg: "bg-yellow-100",
          iconColor: "text-yellow-600",
          id: "alert-003"
        },
        {
          title: "设备离线",
          time: "2025-07-08 10:18",
          device: "冷轧机组 (DEV-LZJ-005)",
          level: "严重",
          levelClass: "bg-red-100 text-red-800",
          icon: "fas fa-plug",
          iconBg: "bg-red-100",
          iconColor: "text-red-600",
          id: "alert-004"
        },
        {
          title: "润滑油压力低",
          time: "2025-07-08 09:05",
          device: "热轧机组 (DEV-RZJ-004)",
          level: "警告",
          levelClass: "bg-yellow-100 text-yellow-800",
          icon: "fas fa-oil-can",
          iconBg: "bg-yellow-100",
          iconColor: "text-yellow-600",
          id: "alert-005"
        }
      ];
      // 过滤掉已处理的预警
      return allAlerts.filter(alert =>
        !this.processedAlerts.some(processed => processed.id === alert.id)
      );
    },
    initDeviceStatusChart() {
      if (!this.$refs.deviceStatusChart) return;
      const chart = echarts.init(this.$refs.deviceStatusChart);
      const option = {
        animation: false,
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          top: "center",
          data: ["正常运行", "待机", "故障", "维修中", "停机"],
        },
        series: [
          {
            name: "运行状态",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["65%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "18",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 3120,
                name: "正常运行",
                itemStyle: { color: "#48bb78" },
              },
              { value: 436, name: "待机", itemStyle: { color: "#4299e1" } },
              { value: 156, name: "故障", itemStyle: { color: "#f56565" } },
              { value: 42, name: "维修中", itemStyle: { color: "#ecc94b" } },
              { value: 88, name: "停机", itemStyle: { color: "#a0aec0" } },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
    initHealthScoreChart() {
      if (!this.$refs.healthScoreChart) return;
      const chart = echarts.init(this.$refs.healthScoreChart);
      const option = {
        animation: false,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["<60", "60-70", "70-80", "80-90", "90-100"],
          axisLine: {
            lineStyle: {
              color: "#e2e8f0",
            },
          },
          axisLabel: {
            color: "#718096",
            fontSize: 10,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#718096",
            fontSize: 10,
          },
          splitLine: {
            lineStyle: {
              color: "#e2e8f0",
            },
          },
        },
        series: [
          {
            name: "设备数量",
            type: "bar",
            barWidth: "60%",
            data: [
              {
                value: 120,
                itemStyle: { color: "#f56565" },
              },
              {
                value: 245,
                itemStyle: { color: "#ed8936" },
              },
              {
                value: 680,
                itemStyle: { color: "#ecc94b" },
              },
              {
                value: 1850,
                itemStyle: { color: "#48bb78" },
              },
              {
                value: 947,
                itemStyle: { color: "#38a169" },
              },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
    // 初始化车间选项
    initWorkshopOptions() {
      // 从设备数据中提取所有唯一的车间名称
      const workshops = [...new Set(this.devices.map(device => device.workshop))];
      this.workshopOptions = workshops;
    },
  },
  watch: {
    // 监听 visibleColumns 变化，自动保存到本地存储
    visibleColumns: {
      handler: "watchVisibleColumns",
      deep: true,
    },
  },
};
</script>
<style scoped>
/* 隐藏input number的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* 自定义颜色类 */
.bg-blue-100 {
  background-color: #ebf8ff;
}

.bg-red-100 {
  background-color: #fed7d7;
}

.bg-green-100 {
  background-color: #c6f6d5;
}

.bg-yellow-100 {
  background-color: #fefcbf;
}

.bg-purple-100 {
  background-color: #e9d8fd;
}

.bg-orange-100 {
  background-color: #feebc8;
}

.bg-teal-100 {
  background-color: #b2f5ea;
}

.bg-indigo-100 {
  background-color: #e5edff;
}

.bg-gray-100 {
  background-color: #f7fafc;
}

.text-blue-600 {
  color: #3182ce;
}

.text-red-600 {
  color: #e53e3e;
}

.text-green-600 {
  color: #38a169;
}

.text-yellow-600 {
  color: #d69e2e;
}

.text-purple-600 {
  color: #805ad5;
}

.text-orange-600 {
  color: #dd6b20;
}

.text-teal-600 {
  color: #319795;
}

.text-indigo-600 {
  color: #5a67d8;
}

.text-gray-600 {
  color: #718096;
}
</style>
